<template>
    <div class="profit">
      <div class="profit-header" :style="{backgroundImage: 'url(' + bg + ')' }">
          <div class="profit-week-headline">本周预计收益：</div>
          <div class="profit-number">928.80</div>
          <div class="profit-info-wrapper">
            <div class="profit-lastweek">上周收益：3223.10</div>
            <div class="profit-day">每周日24:00前发放</div>
          </div>
        </div>
      <div class="profit-main">
        <van-tabs v-model="active">
          <van-tab title="完成">
            <div class="profit-order-list">
              <div class="order-tag-wrapper">
                <span class="order-tag">
                  <em class="order-tag-word">已完成</em>
                </span>
              </div>
              <div class="order-list-left">
                <div class="order-list-top">
                  <span class="list-order">订单 100159022790773</span>
                  <van-tag round type="primary" class="profit-grade icon iconfont icon-dengji-A">&nbsp;特级</van-tag>
                </div>
                <div class="order-list-bottom">
                  <div>服务类型：文字&语音条 30分钟</div>
                  <div>完成时间：2020-05-23 17:59</div>
                </div>
              </div>
              <div class="order-list-right">
                <div class="profit-estimate">预计收入</div>
                <div class="profit-price">72.80元</div>
              </div>
            </div>
            <div class="profit-order-list">
              <div class="order-tag-wrapper">
                <span class="order-tag">
                  <em class="order-tag-word">已完成</em>
                </span>
              </div>
              <div class="order-list-left">
                <div class="order-list-top">
                  <span class="list-order">订单 100159022790773</span>
                  <van-tag round type="primary" class="profit-grade icon iconfont icon-dengji-B">&nbsp;高级</van-tag>
                </div>
                <div class="order-list-bottom">
                  <div>服务类型：文字&语音条 30分钟</div>
                  <div>完成时间：2020-05-23 17:59</div>
                </div>
              </div>
              <div class="order-list-right">
                <div class="profit-estimate">预计收入</div>
                <div class="profit-price">72.80元</div>
              </div>
            </div>

            <div class="profit-order-list">
              <div class="order-tag-wrapper">
                <span class="order-tag">
                  <em class="order-tag-word">已完成</em>
                </span>
              </div>
              <div class="order-list-left">
                <div class="order-list-top">
                  <span class="list-order">订单 100159022790773</span>
                  <van-tag round type="primary" class="profit-grade icon iconfont icon-dengji-C">&nbsp;中级</van-tag>
                </div>
                <div class="order-list-bottom">
                  <div>服务类型：文字&语音条 30分钟</div>
                  <div>完成时间：2020-05-23 17:59</div>
                </div>
              </div>
              <div class="order-list-right">
                <div class="profit-estimate">预计收入</div>
                <div class="profit-price">72.80元</div>
              </div>
            </div>


          </van-tab>
          <van-tab title="未完成">
            <div class="profit-order-list">
              <div class="order-list-left">
                <div class="order-list-top">
                  <span class="list-order">订单 100159022790773</span>
                  <van-tag round type="primary" class="profit-grade icon iconfont icon-dengji-A">&nbsp;特级</van-tag>
                </div>
                <div class="order-list-bottom">
                  <div>服务类型：文字&语音条 30分钟</div>
                  <div>完成时间：2020-05-23 17:59</div>
                </div>
              </div>
              <div class="order-list-right">
                <div class="profit-estimate">预计收入</div>
                <div class="profit-price">72.80元</div>
              </div>
            </div>

            <div class="profit-order-list">
              <div class="order-list-left">
                <div class="order-list-top">
                  <span class="list-order">订单 100159022790773</span>
                  <van-tag round type="primary" class="profit-grade icon iconfont icon-dengji-B">&nbsp;高级</van-tag>
                  <van-tag round type="primary" class="profit-continue">续</van-tag>
                </div>
                <div class="order-list-bottom">
                  <div>服务类型：文字&语音条 30分钟</div>
                  <div>完成时间：2020-05-23 17:59</div>
                </div>
              </div>
              <div class="order-list-right">
                <div class="profit-estimate">预计收入</div>
                <div class="profit-price">72.80元</div>
              </div>
            </div>


            <div class="profit-order-list">
              <div class="order-list-left">
                <div class="order-list-top">
                  <span class="list-order">订单 100159022790773</span>
                  <van-tag round type="primary" class="profit-grade icon iconfont icon-dengji-C">&nbsp;中级</van-tag>
                  <van-tag round type="primary" class="profit-continue">续</van-tag>
                </div>
                <div class="order-list-bottom">
                  <div>服务类型：文字&语音条 30分钟</div>
                  <div>完成时间：2020-05-23 17:59</div>
                </div>
              </div>
              <div class="order-list-right">
                <div class="profit-estimate">预计收入</div>
                <div class="profit-price">72.80元</div>
              </div>
            </div>
          </van-tab>
        </van-tabs>
      </div>

    </div>
</template>

<script>
  import Vue from 'vue';
  import { Tab, Tabs,Tag } from 'vant';
  import Bg from '@/assets/img/bg.png'

  Vue.use(Tab);
  Vue.use(Tabs);
  Vue.use(Tag);
    export default {
        name: "Profit",
        data: function () {
           return {
             active: 2,
             bg: Bg,
           }
        }
    }
</script>

<style scoped lang="stylus">
  @import '~style/mixins.styl'
  @import '~style/varibles.styl'
  .profit
    padding .2rem
    .profit-header
      padding  .3rem
      background-repeat no-repeat
      -moz-background-size 100% 100%
      background-size 100% 100%
      border-radius .1rem
      display flex
      justify-content space-between
      flex-direction column
      .profit-week-headline
        color $DefaultTextColor
        font-size .26rem
        padding-bottom .3rem
      .profit-number
        font-size .5rem
        color $DefaultTextColor
      .profit-info-wrapper
        padding-top .3rem
        between-align-items()
        .profit-lastweek
          color $DefaultTextColor
          font-size .2rem
        .profit-day
          font-size .2rem
          color $DefaultTextColor
    .profit-main
      margin .2rem 0
      .profit-order-list
        height 2rem
        padding 0 .3rem .3rem .3rem
        margin-top .2rem
        background-color #fff
        position relative
        border-radius .1rem
        position relative
        between-align-items()
        .order-tag-wrapper
          position absolute
          top 0rem
          height 1rem
          width 1rem
          display flex
          align-items center
          .order-tag
            position absolute
            top 0
            right 0
            width 0
            height 0
            border-top 1rem solid  $DefaultColor
            border-left 1rem solid transparent
            .order-tag-word
              position absolute
              height 1.2rem
              width 1.2rem
              line-height 1.2rem
              text-align center
              font-size 0.15rem
              color #fff
              transform rotate(45deg)
              -webkit-transform rotate(45deg)
        .order-list-left
          .order-list-top
            .list-order
              font-size .26rem
              color #333
              height 1rem
              line-height 1rem
            .profit-grade
              font-size .12rem
              background-color $DefaultColor
              color $DefaultTextColor
              text-align center
              display inline-block
            .profit-continue
              margin-left .2rem
              width .5rem
              background-color $DefaultColor
              color $DefaultTextColor
              text-align center
              display inline-block
          .order-list-bottom
            font-size .2rem
            color #999
            line-height .3rem
        .order-list-right
          height 100%
          padding-bottom .3rem
          display flex
          flex-direction column
          align-items flex-end
          justify-content flex-end
        .profit-estimate
          font-size .2rem
          color $DefaultWalletColor
          line-height .4rem
        .profit-price
          font-size .36rem
          color $DefaultWalletColor
</style>
<style>
  .profit .van-tabs__nav{
    background-color: #f2f2f2;
  }
  .profit .van-tabs__line{
    background-color: #CED1EF;
  }

  .profit .order-tag-wrapper{
    right: 0rem;
  }
  .profit .order-tag-word{
    right: -.2rem;
    top: -1.25rem;
  }
</style>
